<template>
  <div class="">
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" ref="form" label-width="80px" inline-message="true">
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校名称：" prop="schoolName" label-width="200px">
            <el-input class="hear-input" v-model="form.schoolName"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="所在地行政区：" prop="location" label-width="200px">
            <el-input class="hear-input" v-model="form.location"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校代码：" prop="schoolCode" label-width="200px">
            <el-input class="hear-input" v-model="form.schoolCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校简称：" prop="short" label-width="200px">
            <el-input class="hear-input" v-model="form.short"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校类别：" prop="category" label-width="200px">
            <el-select class="hear-input" v-model="form.category" placeholder="请选择学校类别">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="办学模式：" prop="pattern" label-width="200px">
            <el-select class="hear-input" v-model="form.pattern" placeholder="请选择办学模式">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="行业：" label-width="200px">
            <el-input class="hear-input" v-model="form.industry"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="法人：" label-width="200px">
            <el-input class="hear-input" v-model="form.legalPerson"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-two" :span="24">
          <el-form-item class="hear-item" label="学校英文名称：" label-width="200px">
            <el-input class="hear-input-two" v-model="form.englishName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-two" :span="24">
          <el-form-item class="hear-item" label="学校地址：" label-width="200px">
            <el-input class="hear-input-two" v-model="form.site"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--  -->
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校校长：" label-width="200px">
            <el-input class="hear-input" v-model="form.principal"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="主页地址：" label-width="200px">
            <el-input class="hear-input" v-model="form.page"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="党组织负责人：" label-width="200px">
            <el-input class="hear-input" v-model="form.principal"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="建校年月：" label-width="200px">
            <el-date-picker class="hear-input" style="padding-left: 10px;" v-model="form.data" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="校庆日：" label-width="200px">
            <el-input class="hear-input" v-model="form.decorationDay"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="重点级别：" label-width="200px">
            <el-select class="hear-input" v-model="form.rank" placeholder="重点级别：">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校主管部门：" label-width="200px">
            <el-input class="hear-input" v-model="form.competentDepartment"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="学校标识码：" label-width="200px">
            <el-input class="hear-input" v-model="form.identificationCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="占地面积：" label-width="200px">
            <el-input class="hear-input" v-model="form.area"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="建筑面积：" label-width="200px">
            <el-input class="hear-input" v-model="form.architecture"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="绿化面积：" label-width="200px">
            <el-input class="hear-input" v-model="form.afforest"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="运动场面积：" label-width="200px">
            <el-input class="hear-input" v-model="form.sportsGround"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="邮政编码：" label-width="200px">
            <el-input class="hear-input" v-model="form.postalCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="联系电话：" label-width="200px">
            <el-input class="hear-input" v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="传真电话：" label-width="200px">
            <el-input class="hear-input" v-model="form.fax"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="hear-left" :span="10">
          <el-form-item class="hear-item" label="电子信箱：" label-width="200px">
            <el-input class="hear-input" v-model="form.mailbox"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-two" :span="24">
          <el-form-item class="hear-item" label="历史沿革：" label-width="200px">
            <el-input class="hear-textarea" type="textarea" :rows="5" v-model="form.history">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="hear-two" :span="24">
          <el-form-item class="hear-item" label="备注：" label-width="200px">
            <el-input class="hear-textarea" type="textarea" :rows="5" v-model="form.remark">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';

  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
      // 这里存放数据
      return {
        //表单绑定数组
        form: {
          schoolName: "",
          location: "",
          schoolCode: "",
          location: "",
          short: "",
          category: [],
          pattern: [],
          industry: "",
          legalPerson: "",
          englishName: "",
          site: "",
          principal: "",
          page: "",
          principal: "",
          data: "",
          decorationDay: "",
          rank: "",
          competentDepartment: "",
          identificationCode: "",
          area: "",
          architecture: "",
          afforest: "",
          sportsGround: "",
          postalCode: "",
          phone: "",
          fax: "",
          mailbox: "",
          history: "",
          remark: "",
        },
        // 表单验证
        rules: {
          schoolName: [
            { required: true, message: '请输入学校名称', trigger: 'blur' }
          ],
          location: [
            { required: true, message: '请输入所在地行政区', trigger: 'blur' }
          ],
          schoolCode: [
            { required: true, message: '请输入学校代码', trigger: 'blur' }
          ],
          short: [
            { required: true, message: '请输入学校简称', trigger: 'blur' }
          ],
          category: [
            { required: true, message: '请选择学校类别', trigger: 'blur' }
          ],
          pattern: [
            { required: true, message: '请选择办学模式', trigger: 'blur' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
      //表单校验
      onSubmit (formName) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            return false;
          }
        });
      },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () { },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    beforeCreate () { }, // 生命周期 - 创建之前
    beforeMount () { }, // 生命周期 - 挂载之前
    beforeUpdate () { }, // 生命周期 - 更新之前
    updated () { }, // 生命周期 - 更新之后
    beforeDestroy () { }, // 生命周期 - 销毁之前
    destroyed () { }, // 生命周期 - 销毁完成
    activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style lang='scss' scoped>
  .el-form {
    margin: 20px 0px 0px 10px;
    transform: translateX(7%);
  }

  .hear-item {
    margin: 4px 0px 0px 0px;
  }

  .hear-input {
    width: 75%;
    border-width: 0px 0px 0px 1px;
    padding: 0px 0px 0px 10px;
    margin: -4px 0px 0px 0px;
  }

  .hear-input-two {
    width: 89.5%;
    border-width: 0px 0px 0px 1px;
    padding: 0px 0px 0px 10px;
    margin: -4px 0px 0px 0px;
  }

  .hear-two {
    width: 83.3%;
  }

  .hear-textarea {
    margin: 4px 0px 0px 10px;
    width: 88.7%;
  }

  .el-button {
    width: 200px;
    transform: translateX(287%);
    margin-top: 20px;
  }
</style>